<template>
  <!-- 设备总览 -->
  <el-card>
    <template #header>
      <div class="card-header">
        <h1>设备总览</h1>
      </div>
    </template>

    <!-- 图表挂载容器 -->
    <div ref="chartRef3" style="width: 100%; height: 240px"></div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { getDeviceOverview } from "@/api/status";

/**
 * 功能作用: echarts 图表的配置和使用
 * 功能描述: 能源统计区块的 ECharts 图表配置
 *
 * 引入 自定义的 ECharts 组件 useChart, 用于处理 ECharts 图表数据
 * 创建响应式变量,目的是为了在模板中使用 ECharts 组件,跟html中的 ref 属性对应
 * 创建 setChartdata3 函数,用于处理 设备总览 的图表数据
 * 在函数中定义 ECharts 的图表配置项,包括雷达图的指示器和系列等
 * 调用 设备总览 接口获取数据
 * 判断接口返回的状态码是否为 200,如果是,则将接口返回的数据赋值给图表配置项
 * return chartOptions,返回图表配置项
 * 调用自定义 ECharts 组件的 useChart 函数,传入 chartRef3(设备总览的模板锚点) 和 chartOptions(配置项) 作为参数
 *
 * 注意:
 * 1. 需要确保 ECharts 组件已经正确安装并引入
 * 2. 确保接口返回的数据格式与图表配置项中的数据格式一致
 * 3. 如果需要动态更新图表数据,可以在 setChartData 函数中添加逻辑来处理数据变化
 * 4. 如果需要处理其他类型的图表,可以根据 ECharts 的文档进行相应的配置
 * 5. 确保在使用 ECharts 组件之前,已经正确引入了 ECharts 的样式和脚本
 */

import { useChart } from "@/hokes/useChart";

const chartRef3 = ref(null); // 设备总览

const setChartdata3 = async () => {
  const chartOptions = reactive({
    radar: {
      // shape: 'circle',
      indicator: [
        { name: "闲置数", max: 65 },
        { name: "使用数", max: 160 },
        { name: "故障数", max: 300 },
        { name: "维修数", max: 380 },
        { name: "更换数", max: 520 },
        { name: "报废数", max: 250 },
      ],
    },
    series: [
      {
        name: "设备总览",
        type: "radar",
        data: [
          {
            value: [],
            name: "设备总览",
          },
        ],
      },
    ],
  });

  const res = await getDeviceOverview();
  if (res.code === 200) {
    chartOptions.series[0].data[0].value = res.data.list;
  }
  return chartOptions;
};
useChart(chartRef3, setChartdata3);
</script>

<style scoped></style>
